

<!DOCTYPE html>
<html style="background-color: #f2f2f2">
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="/plugins/layui/css/style.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="/plugins/layui/css/add.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css?v=${.Config.basic.version}" media="all">
    <link rel="stylesheet" href="/plugins/zTree/css/metroStyle/metroStyle.css?v=${.Config.basic.version}">
</head>
<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-xs3">
            <div class="layui-card">
                <div class="layui-card-header">
                    <span>用户</span>


                </div>
                <div class="layui-card-body">
                    <div class="tree-div scroll">
                        <ul id="treeDemo" class="ztree"></ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs9">
            <div class="layui-card">
                <div class="layui-card-header ">
                    <div class="layui-btn-group layuiadmin-btn-group">
                        <a href="javascript:;" onclick="onSave();" class="layui-btn layui-btn-normal layui-btn-sm layui-hide action-edit">保存</a>
                        <a href="javascript:location.reload();" class="layui-btn layui-btn-primary layui-btn-sm">刷新</a>
                    </div>

                    <div class="layui-form" lay-filter="form">
                        <!--<input type="text" name="id" lay-verify="required" placeholder="请输入ID" autocomplete="off" class="layui-input layui-hide">-->
                        <input type="checkbox" checked="" name="mode" lay-skin="switch" lay-filter="mode" lay-text="白名单|黑名单">
                    </div>

                    <span class="title"></span>


                </div>
                <div class="layui-card-body">

                    <div class="tree-div scroll">
                        <ul id="treeDemo1" class="ztree"></ul>

                    </div>
                </div>

            </div>
        </div>
    </div>
</div>



<script src="/plugins/layui/layui.js"></script>
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
<script src="/plugins/zTree/js/jquery.ztree.core.min.js"></script>
<script src="/plugins/zTree/js/jquery.ztree.excheck.js"></script>
<script src="/plugins/zTree/js/jquery.ztree.exedit.js"></script>
<script>
    var zTree=null;
    var zTree1=null;
    var table=null;
    var form=null;
    var element=null;
    var iconPicker =null;
    var Table=null;
    var actions=null;
    var token = window.localStorage.getItem("token");
    var user_info=JSON.parse(window.localStorage.getItem("user_info"));
    var func_url="${.func_url}";
    var actions=[];
    var selectedTreeNode=null;
    token = 'Bearer ' + token;
    layui.config({
        base: '../layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','form','element'], function(){
        $ = layui.$;
        form = layui.form;
        element = layui.element;
        $.ajax({
            type: 'GET',
            url: '/User/Actions',
            data: {func_url:func_url},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                console.info(data)
                actions=data.data;
                for(var i=0;i<actions.length;i++){
                    $('.action-'+actions[i].action_id).removeClass("layui-hide");
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载操作信息失败');
            }
        });

        var tree_setting = {
            view: {
                dblClickExpand: false,
                fontCss: getFont,
                nameIsHTML: true
            },
            callback: {
                onClick: treeOnClick
            },
            edit: {
                enable: false,
            },
            data: {
                key:{
                    name:"name"
                },
                simpleData: {
                    enable: true,
                    idKey: 'id',
                    pIdKey: '',
                    rootPId: null
                }
            }
        };
        var checked_tree_setting={
            view: {
                dblClickExpand: false,
                fontCss: getFont,
                nameIsHTML: true
            },
            callback: {
                onCheck: zTreeOnCheck
            },
            check: {
                enable: true,
                chkboxType : { "Y" : "s", "N" : "s" }
                //nocheckInherit: true
            }
        };
        function getFont(treeId, node) {
            return node.font ? node.font : {};
        }
        function treeOnClick(event, treeId, treeNode) {
            selectedTreeNode=treeNode;

            $.ajax({
                type: 'GET',
                url: '/Topo',
                data: {userid:selectedTreeNode.userid},
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {

                    if(data.data && data.data.length>0){
                        var item=data.data[0];
                        console.info(item);
                        if(item.mode>0){
                            item.mode="on";
                        }else {
                            item.mode="";
                        }
                        form.val("form",{userid:item.userid,mode:item.mode});
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载操作信息失败');
                }
            });

            $.ajax({
                type: 'GET',
                url: '/Topo/Tree',
                data: {userid:selectedTreeNode.userid},
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {
                    //var data=data.data;
                    var nodes=setDataIcon(data.data);
                    console.info(nodes);
                    zTree1 = $.fn.zTree.init($("#treeDemo1"), checked_tree_setting, nodes);
                    //zTree.expandAll(true);

                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('加载信息失败');
                }

            });
        }
        function zTreeOnCheck(event, treeId, treeNode) {
        }

        form.on('submit(btn_save)', function(data){
            var field = data.field; //获取提交的字段
            //console.info(field);
            //return ;

            var permission=[];
            for(var prop in field){
                var start=prop.indexOf('[');
                var end = prop.indexOf(']');
                if (start>0 && end>0){

                    var func_id=prop.substring(0,start);
                    var action_id=prop.substring(start+1,end);
                    permission.push({role_id:field['id'],func_id:func_id,action_id:action_id});
                    delete prop;
                }
            }
            field['permission']=JSON.stringify(permission);
            //console.info(field);
            //return  false;

            $.ajax({
                type: 'PUT',
                url: '/Permission',
                data: field,
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer ' + window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {
                    //console.info(data)
                    if(data.code>=0){
                        layer.msg('保存成功');
                    }else{
                        layer.alert('保存失败:'+data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('保存失败');
                }
            });
            return false;
        });
        form.on('submit(btn_add)', function(data){
            var field = data.field; //获取提交的字段
            var permission=[];
            for(var prop in field){
                var start=prop.indexOf('[');
                var end = prop.indexOf(']');
                if (start>0 && end>0){

                    var func_id=prop.substring(0,start);
                    var action_id=prop.substring(start+1,end);
                    permission.push({role_id:field['id'],func_id:func_id,action_id:action_id});
                    delete prop;
                }
            }
            field['permission']=JSON.stringify(permission);
            $.ajax({
                type: 'POST',
                url: '/Permission',
                data: field,
                beforeSend: function(request) {
                    request.setRequestHeader("Authorization", 'Bearer ' + window.localStorage.getItem("token"));
                },
                dataType: "json",
                success: function (data) {
                    //console.info(data)
                    if(data.code>=0){
                        layer.msg('保存成功');
                        window.location.reload();
                    }else{
                        layer.alert('保存失败:'+data.msg);
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.alert('保存失败');
                }
            });
            return false;
        });


        $.ajax({
            type: 'GET',
            url:'/User/List',
            data: {},
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                for(var i=0;i<data.data.length;i++){
                    data.data[i]["icon"]="/img/alibaba/user.png";
                }
                zTree = $.fn.zTree.init($("#treeDemo"), tree_setting, data.data);
                zTree.expandAll(true);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.msg('加载信息失败');
            }

        });



        resizeElement();
    });


    //设置图标
    function setDataIcon(data){
        for(var i=0;i<data.length;i++){
            var node=data[i];
            if(node.type=='root'){
                node["icon"]="/img/alibaba/root.png";
            }
            else if(node.type=='net_group'){
                node["icon"]="/img/alibaba/net_gw.png";
            }else if(node.type=='net_node'){
                node["icon"]="/img/alibaba/ne.png";
            }else if(node.type=='net_rack'){
                node.open=true;
                node["icon"]="/img/alibaba/machine_box.png";
            }
            else if(node.type=='net_rack_slot'){
                node["icon"]="/img/alibaba/slot.png";
            }
            if(node['children']){
                var data1=node.children;
                setDataIcon(data1);
            }
        }
        return data;
    }

    function onSave(){
        var array=(zTree1.getCheckedNodes(true));
        var checkArray=array.filter(function (item) {
            return item.checked == true;
        });
        //console.info(checkArray);
        var ne_group_array=[];
        var ne_node_array=[];
        var ne_rack_array=[];
        var ne_rack_slot_array=[];
        for(var i=0;i<checkArray.length;i++){
            if(checkArray[i].type=="net_group"){
                ne_group_array.push(checkArray[i].rid)
            }else if(checkArray[i].type=="net_node"){
                ne_node_array.push(checkArray[i].rid)
            }else if(checkArray[i].type=="net_rack"){
                ne_rack_array.push(checkArray[i].rid)
            }else if(checkArray[i].type=="net_rack_slot"){
                ne_rack_slot_array.push(checkArray[i].rid)
            }
        }
        //console.info(selectedTreeNode);
        var data = form.val("form");

        if(data.mode=="on"){
            data.mode=1;
        }else{
            data.mode=0;
        }

        if(!selectedTreeNode){
            layer.alert("未选择用户");
            return;
        }
        data.userid=selectedTreeNode.userid;
        data.ne_group=ne_group_array.join(",");
        data.ne_node=ne_node_array.join(",");
        data.ne_rack=ne_rack_array.join(",");
        data.ne_rack_slot=ne_rack_slot_array.join(",");
        console.info(data);

        layer.load(1);
        $.ajax({
            type: 'PUT',
            url: '/Topo',
            data: data,
            beforeSend: function(request) {
                request.setRequestHeader("Authorization", 'Bearer '+window.localStorage.getItem("token"));
            },
            dataType: "json",
            success: function (data) {
                //console.info(data)
                layer.closeAll();
                if(data.code>=0){
                    layer.msg('保存成功');
                }else{
                    layer.alert('保存失败:'+data.msg);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                layer.alert('保存失败');
            }
        });
    }

    $(window).resize(function () {
        //console.info('resize')
        resizeElement();
    });
    function resizeElement() {
        $('.tree-div').height($(window).height()-95);
    }

</script>
<script src="../js/check_screen.js?v=${.Config.basic.version}"></script>

</body>
</html>

